<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <script src="js/vue.js"></script>   <!--引入vue.js文件-->
    <script src="element-ui/lib/index.js"></script>   <!--引入组件库-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">  <!--引入样式库-->
    <script src="js/axios-0.18.0.js"></script>
    <style scoped>
        .profile {
            max-width: 600px;
            margin: auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .avatar-container {
            text-align: center;
            margin-bottom: 20px;
        }

        .avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            cursor: pointer;
        }

        .footer {
            margin-top: 20px;
            display: flex;
            flex-direction: column;
        }

    /*    浏览记录*/
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
    /*********************************************************  这是弹幕                                                    */
        .danmu-container {
            width: 100%;
            height: 700px;
            position: relative;
            overflow: hidden;
            background-color: transparent;
        }

        .danmu {
            position: absolute;
            right: 0;
            white-space: nowrap;
            font-size: 24px;
            color: white;
        }

        @keyframes move {
            from {
                right: 0;
            }
            to {
                right: calc(100% + 200px);
            }
        }

        .centera{
            text-decoration: none;
            color: black;
        }
        .centera:hover{
            color: orange;
            text-decoration: orange;
            cursor: pointer;
        }
        .selected {
            background-color: #dd6161; /* 设置选中时的背景颜色 */
        }
    </style>
</head>
<body>
<div id="app" style="margin: 0 200px">
    <div style="max-width: 600px;margin: auto;margin-bottom: 20px">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">个人资料展示</el-menu-item>
            <el-menu-item index="2">浏览记录</el-menu-item>
            <el-menu-item index="3">收藏库</el-menu-item>
            <el-menu-item index="4">管理中心</el-menu-item>
            <el-menu-item index="5" @click="ShowTextFalse">创建论坛</el-menu-item>
<!--            <el-menu-item index="6" @click="ShowText">留言板</el-menu-item>-->
        </el-menu>
    </div>
    <div v-if="TheKey == 1">
        <div class="profile">
            <!-- 顶部圆形图片展示区域 -->
            <div class="avatar-container">
                <el-tooltip content="点击更换头像">
                    <img class="avatar" :src="form.image" @click="handleAvatarClick">
                </el-tooltip>
            </div>

            <!-- 第二部分，显示用户信息 -->
            <el-form :model="form" label-width="80px">
                <el-form-item label="姓名">
                    <el-input v-model="form.name" :disabled="isDisabled"></el-input>
                </el-form-item>
                <el-form-item label="QQ号">
                    <el-input v-model="form.phone" :disabled="isDisabled"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password" :disabled="isDisabled" show-password></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="form.gender" :disabled="isDisabled">
                        <el-radio label="male">男</el-radio>
                        <el-radio label="female">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="form.age" :disabled="isDisabled"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.ipaddress" type="textarea" :rows="2" :disabled="isDisabled"></el-input>
                </el-form-item>
            </el-form>

            <!-- 第三部分，展示部分（不具体实现） -->
            <div class="footer">
                <el-button type="primary" @click="handleEditSubmit">{{ isDisabled ? '编辑' : '提交' }}</el-button>
            </div>

            <!-- 文件选择的弹窗 -->
            <el-dialog
                    title="选择头像"
                    :visible.sync="dialogVisible"
                    width="30%">
                <el-upload
                        class="upload"
                        action=""
                        :limit="1"
                        :drag="true"
                        :multiple="true"
                        :http-request="uploadHttp"
                        :before-upload="beforeAvatarUpload"
                        >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">上传文件只能是 JPG/PNG 不大于1MB</div>
                </el-upload>
            </el-dialog>
        </div>
    </div>
    <div v-else-if="TheKey ==2 ">
        <div style="background-color: #E4E7ED;display: flex; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
            <p style="display:flex;flex-direction:column;flex: auto;align-items:center;margin: 8px 10px">仅展示最近20天的浏览记录</p>
        </div>
        <el-table
                :data="TheHistory"
                style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="发布人">
                            <span>{{ props.row.name }}</span>
                        </el-form-item>
                        <el-form-item label="点赞量">
                            <span>{{ props.row.ac }}</span>
                        </el-form-item>
                        <el-form-item label="所属论坛">
                            <span>{{ props.row.bname }}</span>
                        </el-form-item>
                        <el-form-item label="投币量">
                            <span>{{ props.row.bc }}</span>
                        </el-form-item>
                        <el-form-item label="用户 Id">
                            <span>{{ props.row.uid }}</span>
                        </el-form-item>
                        <el-form-item label="分享量">
                            <span>{{ props.row.fc }}</span>
                        </el-form-item>
                        <el-form-item label="论坛 ID">
                            <span>{{ props.row.bid }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    label="主题"
                    prop="title">
            </el-table-column>
            <el-table-column
                    label="内容"
                    prop="content">
            </el-table-column>
            <el-table-column
                    label="发布日期"
                    prop="tdate">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                <template slot-scope="scope">
                    <el-button
                            @click.native.prevent="deleteRow(scope.$index, TheHistory,scope.row.pid)"
                            type="text"
                            size="small">
                        移除
                    </el-button>
                    <el-button type="text" size="small" @click="belike(scope.row.sc,scope.row.pid)" v-if="scope.row.sc == 1">已收藏</el-button>
                    <el-button type="text" size="small" @click="belike(scope.row.sc,scope.row.pid)" v-else>收藏</el-button>
                    <el-button type="text" size="small" @click="goChangePage(scope.row.bid,scope.row.pid)">进入帖子</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div v-else-if="TheKey ==3 ">
        <div style="background-color: #FF4040;display: flex; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
            <p style="display:flex;flex-direction:column;flex: auto;align-items:center;margin: 8px 10px">仅展示最近20天的收藏记录</p>
        </div>
        <el-table
                :data="TheBelike"
                style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="发布人">
                            <span>{{ props.row.name }}</span>
                        </el-form-item>
                        <el-form-item label="点赞量">
                            <span>{{ props.row.ac }}</span>
                        </el-form-item>
                        <el-form-item label="所属论坛">
                            <span>{{ props.row.bname }}</span>
                        </el-form-item>
                        <el-form-item label="投币量">
                            <span>{{ props.row.bc }}</span>
                        </el-form-item>
                        <el-form-item label="用户 Id">
                            <span>{{ props.row.uid }}</span>
                        </el-form-item>
                        <el-form-item label="分享量">
                            <span>{{ props.row.fc }}</span>
                        </el-form-item>
                        <el-form-item label="论坛 ID">
                            <span>{{ props.row.bid }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    label="主题"
                    prop="title">
            </el-table-column>
            <el-table-column
                    label="内容"
                    prop="content">
            </el-table-column>
            <el-table-column
                    label="发布日期"
                    prop="tdate">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="120">
                <template slot-scope="scope">
                    <el-button
                            @click.native.prevent="deleteRow(scope.$index, TheBelike,scope.row.pid)"
                            type="text"
                            size="small">
                        移除
                    </el-button>
                    <el-button type="text" size="small" @click="belike(scope.row.sc,scope.row.pid)" v-if="scope.row.sc == 1">已收藏</el-button>
                    <el-button type="text" size="small" @click="belike(scope.row.sc,scope.row.pid)" v-else>收藏</el-button>
                    <el-button type="text" size="small" @click="goChangePage(scope.row.bid,scope.row.pid)">进入帖子</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
<!--    ==============================================================================================================================================a-->
    <div v-else-if="TheKey ==4 ">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="帖子管理" name="first">
                <div style="display: flex;">
                    <div style="width: 25%; border-right: 1px solid #EBEEF5; height: 700px; overflow-y: scroll;">
                        <div style="display:flex;justify-content: center"><p style="margin: 0">论坛管理</p></div>
                        <div v-for="(item,index) in AllBars" :key="item.bid"
                             style="width: 100%; height: 80px; margin-bottom: 8px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"
                             :class="{'selected': selectedItem == item.bid}">
                            <div style="display: flex; height: 80px; cursor: pointer" @click="getAllPosts(item.bid)">
                                <div>
                                    <img :src="item.bimage" alt="#" height="100%" width="80px"/>
                                </div>
                                <div style="padding-left: 10px">
                                    <p style="margin: 5px" class="centera" @click="goChangePage(item.bid, 0, item.uid)">{{item.bname}}</p>
                                    <p style="margin: 0 0 5px 0">经验值：{{item.ex}}</p>
                                    <p style="margin: 0 0 5px 0">创立时间：{{item.bdata}}</p>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div style="width: 25%;border-right: 1px solid #EBEEF5;height: 700px; overflow-y: scroll;">
                        <div style="display:flex;justify-content: center"><p style="margin: 0">帖子管理</p></div>
                        <div style="width: 100%; height: 80px; margin-bottom: 8px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"
                             v-for="(post,index) in AllPosts" :key="post.pid"
                             :class="{'selected': selectedItem2 == post.pid}">
                            <div style="display: flex; height: 80px;cursor: pointer" @click="getAllDiscussCenter(post.pid)">
                                <div>
                                    <img :src="post.image" alt="#" height="100%" width="80px"/>
                                </div>
                                <div style="padding-left: 10px;width: 110px">
                                    <p style="margin:10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis" class="centera" @click="goChangePage(post.bid,post.pid)">{{post.title}}</p>
                                    <p style="margin-bottom:10px;margin-left: 10px">{{post.name}}</p>
                                </div>
                                <div style="display:flex;flex-direction: column;justify-content: flex-end">
                                    <el-button slot="reference" @click="delPosts(post.pid,post.bid)">删除</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="width: 50%;height: 700px; overflow-y: scroll;">
                        <div style="display:flex;justify-content: center"><p style="margin: 0">评论管理</p></div>
                        <div style="display: flex; height: 80px; margin-bottom: 8px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"
                             v-for="(discuss,index) in AllDis" :key="discuss.cid"
                             :class="{'selected': selectedItem3 == discuss.cid}">
                            <div style="display: flex; height: 80px;cursor: pointer; margin-bottom: 8px"  @click="Change(discuss.cid)">
                                <div>
                                    <img :src="discuss.image" alt="#" height="100%" width="80px"/>
                                </div>
                                <div style="padding-left: 10px;width: 394px">
                                    <p style="margin:10px">{{discuss.text}}</p>
                                    <p style="margin-bottom:10px;margin-left: 10px">{{discuss.cdate}}</p>
                                </div>
                                <div style="display:flex;flex-direction: column;justify-content: flex-end">
                                    <el-button slot="reference" @click="delDis(discuss.cid,discuss.pid)">删除</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="坛务管理" name="second">
                <div style="background-color: #E4E7ED;display: flex; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
                    <p style="display:flex;flex-direction:column;flex: auto;align-items:center;margin: 8px 10px">我的论坛</p>
                </div>
                <div style="width: 100%; height: 125px; display: flex; overflow-x: auto; overflow-y: hidden;">
                    <div style="display:flex;border: 1px solid #DCDFE6;height: 100px; width: 260px; margin: 5px;  flex-shrink: 0;"
                         v-for="(item, index) in MyBars" :key="item.bid"
                         @click="getOtherUser(item.otherid,item.bid)"
                         :class="{'selected': selectedItem4 == item.bid}">
                        <div>
                            <img :src="item.bimage" alt="#" height="100%" width="120px"/>
                        </div>
                        <div style="padding-left: 10px;width: 140px">
                            <p style="margin:5px" class="centera" @click="goChangePage(item.bid,0,item.uid)">{{item.bname}}</p>
                            <p style="margin:5px">经验值：{{item.ex}}</p>
                            <p style="margin:5px">{{item.bdata}}</p>
                        </div>
                    </div>
                </div>
                <div style="background-color: #E4E7ED;display: flex; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
                    <p style="display:flex;flex-direction:column;flex: auto;align-items:center;margin: 8px 10px">小论坛主</p>
                </div>
                <div style="margin-top: 5px;width: 100%;height: 142px; display: flex; overflow-x: auto; overflow-y: hidden;">
                    <div style="display:flex;border: 1px solid #DCDFE6;height: 120px;margin: 5px; width: 315px;" v-for="(o,index) in OtherUser" :key="o.uid">
                        <div>
                            <img :src="o.image" alt="#" height="100%" width="120px"/>
                        </div>
                        <div style="width: 140px">
                            <p style="margin:10px;font-size: 20px;font-weight: bold" class="centera" @click="goChangePage(0,0,o.uid)">{{o.name}}</p>
                            <!-- 根据 gender 的值显示不同的性别文本 -->
                            <p style="margin: 10px;color: #606266;font-size: 14px" v-if="o.gender == 'female'">女士</p>
                            <p style="margin: 10px;color: #606266;font-size: 14px" v-else>男士</p>
                            <p style="margin-bottom:10px;margin-left: 10px;color: #606266;font-size: 14px">{{o.rdata}}</p>
                        </div>
                        <div style="display:flex;flex-direction: column;justify-content: flex-end">
                            <el-button slot="reference" @click="xltz(o.uid,BarBId)">撤销</el-button>
                        </div>
                    </div>
                </div>
                <div style="background-color: #E4E7ED;display: flex; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
                    <p style="display:flex;flex-direction:column;flex: auto;align-items:center;margin: 8px 10px">申请入职小论坛主的用户</p>
                </div>
                <div>
                    <el-table
                            :data="AllApply"
                            border
                            style="width: 100%">
                        <el-table-column
                                fixed
                                prop="image"
                                label="头像"
                                width="150"
                                align="center"
                        >
                            <template slot-scope="scope">
                                <img :src="scope.row.image" style="width: 100%; max-width: 100px; height: auto; margin: 0 auto;">
                            </template>
                        </el-table-column>

                        <el-table-column
                                prop="name"
                                label="姓名"
                                width="160"
                                align="center"
                        >
                        </el-table-column>

                        <el-table-column
                                prop="gender"
                                label="性别"
                                width="120"
                                align="center"
                        >
                            <template slot-scope="scope">
                                {{ scope.row.gender === 'female' ? '女' : (scope.row.gender === 'male' ? '男' : '') }}
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="experience"
                                label="经验值"
                                align="center"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="bimage"
                                label="论坛"
                                width="150"
                                align="center"
                        >
                            <template slot-scope="scope">
                                <img :src="scope.row.bimage" style="width: 100%; max-width: 100px; height: auto; margin: 0 auto;">
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="bname"
                                label="申请论坛"
                                align="center"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center"
                                width="180">
                            <template slot-scope="scope">
                                <el-button type="danger" size="small" @click="updateBarsApply(scope.row.uid,scope.row.bid,scope.row.otherid)">通过</el-button>
                                <el-button type="success" size="small" @click="goChangePage(0,0,scope.row.uid)">详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>

    <div v-else-if="TheKey ==5 ">
        <div style="margin: 0 300px;background-color: white">
            <div style="height: 100px">
                <el-form ref="form" :model="makebar" label-width="80px">
                    <el-form-item label="论坛名称">
                        <el-input v-model="makebar.bname"></el-input>
                    </el-form-item>
                    <el-form-item label="类型选择">
                        <el-select v-model="makebar.tid" placeholder="请选择活动区域">
                            <el-option label="软件应用区" value="1"></el-option>
                            <el-option label="游戏电竞区" value="2"></el-option>
                            <el-option label="生活日常区" value="3"></el-option>
                            <el-option label="旅游晒图区" value="4"></el-option>
                            <el-option label="动漫漫画区" value="5"></el-option>
                            <el-option label="影视推荐区" value="6"></el-option>
                            <el-option label="文学艺术区" value="7"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-upload
                        class="upload"
                        action=""
                        :limit="1"
                        :drag="true"
                        :multiple="true"
                        :file-list="TheImages"
                        :http-request="uploadHttp2"
                        :before-upload="beforeAvatarUpload2"
                        :on-remove="handleRemove2"
                        list-type="picture">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">上传文件只能是 JPG/PNG 格式! 图片最大1MB</div>
                </el-upload>
                <div class="footer">
                    <el-button type="primary" @click="addBars">提交</el-button>
                </div>
            </div>
        </div>
    </div>
<!--    <div v-else-if="TheKey ==6 " >-->
<!--        <div class="danmu-container" ref="container" style="height: 700px;background-image: url('images/tx4.png');">-->
<!--            &lt;!&ndash; 这里是弹幕内容 &ndash;&gt;-->
<!--        </div>-->
<!--        <div style="display: flex;flex-direction: column;flex: auto">-->
<!--            <el-input-->
<!--                    type="textarea"-->
<!--                    :rows="4"-->
<!--                    placeholder="请输入内容"-->
<!--                    v-model="messageText">-->
<!--            </el-input>-->
<!--        </div>-->
<!--        &lt;!&ndash; 第三部分，展示部分（不具体实现） &ndash;&gt;-->
<!--        <div class="footer">-->
<!--            <el-button type="primary" @click="submit">提交</el-button>-->
<!--        </div>-->
<!--    </div>-->
    <div style="position: absolute;top: 10px;right: 10px">
        <el-button type="primary" plain @click="goBack">返回到主页</el-button>
    </div>


</div>

<script>
    new Vue({
        el:'#app',
        mounted(){
            this.findUser();
        },
        data:{
            dialogVisible: false, // 是否显示选择文件的弹窗
            isDisabled: true, // 是否禁用表单项
            form: {},
            name:'',
            password: '',
            isLogin: false,
            //上传
            uploadConf: {
                region: null,
                accessKeyId: null,
                accessKeySecret: null,
                bucket: null,
                stsToken: null,
            },
            objectName: '',
            url: '',
            url2:'',
            //菜单
            activeIndex:'',
            TheKey: 4,
            //===================================================浏览记录  收藏
            //浏览记录
            TheHistory:[],
            TheBelike:[],
            //+++++++++++++++++++++++++++++++++++++++++++++++++++++留言板
            TheText: [],
            MaxNumber: 20, // 最大弹幕数
            numberLyb: 0,
            messageText:'',
            isShowText:false,
            danmuInterval:'',
            //+++++++++++++++++++++++++++++++++++++++++++++管理中心
            activeName: 'first',
            AllBars:[],
            AllPosts:[],
            AllDis:[],
            AllApply:[],
            MyBars:[],
            OtherUser:[],
            BarBId:'',
            //==========================================创建论坛
            makebar:{},
            TheImages:[],
            selectedItem: '', // 用于存储选中的 item.bid
            selectedItem2: '', // 用于存储选中的 item.bid
            selectedItem3: '', // 用于存储选中的 item.bid
            selectedItem4: '', // 用于存储选中的 item.bid


        },
        methods:{
            // 点击头像时触发，显示文件选择的弹窗
            handleAvatarClick() {
                this.dialogVisible = true;
            },
            // 点击编辑/提交按钮的处理逻辑
            handleEditSubmit() {
                if (this.isDisabled) {
                    // 如果当前是禁用状态，则切换为可编辑状态
                    this.isDisabled = false;
                } else {
                    // 如果当前是可编辑状态，则弹出确认对话框
                    this.$confirm('确定要提交吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // 确认提交逻辑，这里可以调用提交接口等操作
                        // 提交完成后，将 isDisabled 状态切换为禁用
                        this.isDisabled = true;
                        console.log(this.form)
                        axios.get("users/updateUser",{params:{uid:this.form.uid,name:this.form.name,phone:this.form.phone,password:this.form.password,
                            image:this.form.image,gender:this.form.gender,age:this.form.age,ipaddress:this.form.ipaddress}}).then(x=>{
                            this.$message({
                                showClose: true,
                                type: 'success',
                                message: '提交成功！3秒后重新登陆！'
                            });
                            setTimeout(()=>{
                                window.location.href = 'log_in.html';
                            },3000)
                        })
                    }).catch(() => {
                        // 取消提交，不做任何操作
                    });
                }
            },
            findUser(){
                this.name = getCookie("name");
                this.password = getCookie("password");

                if (this.name && this.name.trim() !== "" && this.password && this.password.trim() !== "") {
                    this.isLogin = true;
                } else {
                    this.isLogin = false;
                }
                console.log(this.isLogin)
                // 辅助函数，用于获取cookie的值
                function getCookie(name) {
                    let cookieArr = document.cookie.split(";");
                    for(let i = 0; i < cookieArr.length; i++) {
                        let cookiePair = cookieArr[i].trim().split("=");
                        if (cookiePair[0] === name) {
                            return cookiePair[1];
                        }
                    }
                    return "";
                }
                axios.get("users/findByName_pwd",{params:{name : this.name,password:this.password}}).then(x=>{
                    this.form = x.data;
                    if (this.isLogin){
                        this.history();
                    }else{
                        window.location.href = `log_in.html`;
                    }
                })
            },
            handleSelect(key) {
                console.log(key);
                this.TheKey = key;
            },

            /**
             * 阿里云OSS上传
             */
            uploadHttp({ file }) {
                // 创建FormData对象，并添加文件数据
                const formData = new FormData();
                formData.append("file",file)
                // 添加输入框内容到 formData 数组
                // 创建一个包含输入框数据的对象

                // 发送POST请求到后端
                axios.post('/tools/oss', formData, {
                    "Content-Type": "multipart/form-data;charset=utf-8"
                }).then(response => {
                    console.log('上传成功', response);
                    console.log(response.data)
                    let parts = response.data.split('&&&');
                    this.url = parts[0];
                    this.objectName = parts[1];
                    console.log(this.url + this.objectName)
                    axios.get("/users/update_image",{params:{uid:this.form.uid,image:this.url}}).then(x=>{
                        if (x.data){
                            this.dialogVisible =false;
                            window.location.reload();
                         }
                    })
                }).catch(error => {
                    console.error('上传失败', error);
                });
            },
            /**
             * 图片限制
             */
            beforeAvatarUpload(file) {
                const fileType = file.name.toLowerCase();
                const isImage = /\.(jpg|jpeg|png)$/.test(fileType);
                const isVideo = /\.(mp4)$/.test(fileType);
                const isAudio = /\.(mp3)$/.test(fileType);

                let maxSizeMB;
                if (isImage) {
                    maxSizeMB = 1; // 图片最大1MB
                } else if (isAudio) {
                    maxSizeMB = 50; // 音频最大50MB
                } else if (isVideo) {
                    maxSizeMB = 300; // 视频最大300MB
                } else {
                    this.$message.error('上传文件只能是 JPG/JPEG/PNG/MP4/MP3 格式!');
                    return false;
                }

                const maxSizeBytes = maxSizeMB * 1024 * 1024;
                const isLtMaxSize = file.size / 1024 < maxSizeBytes;

                if (!isLtMaxSize) {
                    this.$message.error(`当前文件大小不能超过 ${maxSizeMB}MB!`);
                }

                return (isImage || isVideo || isAudio) && isLtMaxSize;
            },
            history(){
                axios.get("posts/history",{params:{uid:this.form.uid}}).then(x=>{
                    this.TheHistory = x.data;
                    this.TheHistory.forEach(x =>{
                        if (x.sc){
                            this.TheBelike.push(x)
                        }
                    })

                    this.getAllBars();
                    this.getAllMyBars();
                })
            },
            //移除和收藏   ========浏览记录
            deleteRow(index, rows,pid) {
                axios.get("posts/moveHistory",{params:{uid:this.form.uid,pid:pid}}).then(x=>{
                    this.$message({
                        showClose: true,
                        message: '移除成功',
                        type: 'success'
                    });
                    rows.splice(index, 1);
                })
            },
            belike(sc,pid){
                if (sc ==1 ){
                    axios.get("posts/belike",{params:{uid:this.form.uid,sc:0,pid:pid}}).then(x=>{
                            this.$message({
                                showClose: true,
                                message: '取消收藏',
                                type: 'warning'
                            });
                    })
                }else if(sc == 0){
                    axios.get("posts/belike",{params:{uid:this.form.uid,sc:1,pid:pid}}).then(x=>{
                        this.$message({
                            showClose: true,
                            message: '收藏成功',
                            type: 'success'
                        });
                    })
                }
            },
            //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++留言
            createDanmu(text) {
                var danmu = document.createElement("span");
                danmu.innerText = text;
                danmu.className = "danmu";

                danmu.style.top = Math.random() * (this.$refs.container.clientHeight - danmu.clientHeight) + "px";
                danmu.style.color = "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")";
                this.$refs.container.appendChild(danmu);
                danmu.style.animation = "move " + (5 + Math.random() * 5) + "s linear infinite";

                // 监听动画结束事件，结束后移除弹幕元素并减少计数
                danmu.addEventListener("animationend", () => {
                    this.numberLyb--;
                    this.$refs.container.removeChild(danmu);
                });
            },
            startDanmu() {
                this.danmuInterval = setInterval(() => {
                    // 控制每秒最多生成5条弹幕
                    for (let i = 0; i < 2; i++) {
                        if (this.numberLyb < this.MaxNumber) {
                            let text = this.TheText[Math.floor(Math.random() * this.TheText.length)];
                            this.numberLyb++;
                            this.createDanmu(text);
                        }
                    }
                }, 1000);
            },

            findText() {
                axios.get("users/findText", { params: { uid: this.form.uid } })
                    .then(response => {
                        this.TheText = response.data ? response.data.map(item => item.content) : [];
                        console.log(this.TheText);
                        // 等待数据返回后开始生成弹幕
                        if (this.TheText.length > 0) {
                            this.startDanmu();
                        }
                    })
                    .catch(error => {
                        console.error("Error fetching data:", error);
                    });
            },
            ShowText(){
                this.isShowText = !this.isShowText
                this.findText();
            },
            ShowTextFalse(){
                this.isShowText = false
                clearInterval(this.danmuInterval);
            },


            submit(){
                axios.get("users/addText",{params:{uid:this.form.uid,content:this.messageText}}).then(x=>{
                    this.$message({
                        showClose: true,
                        message: '提交成功',
                        type: 'success'
                    });
                    this.messageText = '';
                })
            },
            //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++管理
            handleClick(tab, event) {
                console.log(tab, event);
            },
            handleClick2(tab, event) {
                console.log(tab, event);
            },
            getAllBars(){
                axios.get("bars/getBarsCenter",{params:{uid:this.form.uid}}).then(x=>{
                    this.AllBars = x.data;
                })
            },
            getAllPosts(bid){
                axios.get("posts/getDiscuss_Bar",{params:{bid:bid,uid:this.form.uid}}).then(x=>{
                    this.AllPosts = x.data;
                    this.AllDis = [];
                    this.selectedItem = bid;
                    console.log(this.selectedItem)
                })
            },
            getAllDiscussCenter(pid){
                axios.get("posts/getDiscuss",{params:{pid:pid}}).then(x=>{
                    this.AllDis = x.data;
                    this.selectedItem2 = pid;
                })
            },
            Change(cid){
              this.selectedItem3 = cid;
            },
            delPosts(pid,bid){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("posts/delPosts",{params:{pid:pid}}).then(x=>{
                        this.$message({
                            showClose: true,
                            message: '成功删除',
                            type: 'success'
                        });
                        this.getAllPosts(bid);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            delDis(cid,pid){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("posts/delDis",{params:{cid:cid}}).then(x=>{
                        this.$message({
                            showClose: true,
                            message: '成功删除',
                            type: 'success'
                        });
                        this.getAllDiscussCenter(pid);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //===================================================================申请
            getAllApply(bid){
                axios.get("bars/getAllApply",{params:{bid:bid}}).then(x=>{
                    this.AllApply = x.data.filter(item => item.status == 1);//1为未通过  0通过
                })
            },
            getAllMyBars(){
              axios.get("bars/getMyBars",{params:{uid:this.form.uid}}).then(x=>{
                  this.MyBars = x.data;
              })
            },
            getOtherUser(n,bid){
                let m = this.form.uid;
                if (n!=null){
                    n = m+","+n;
                }else {
                    n=""+m
                }
                axios.get("bars/getUser",{params:{uid : n}}).then(x=>{
                    // 假设 x.data 是一个包含对象的数组，每个对象都有一个 uid 属性
                    this.OtherUser = x.data.filter(item => item.uid !==  this.form.uid);
                    this.getAllApply(bid);
                    this.BarBId = bid;
                    this.selectedItem4 = bid;
                });
            },


            //最外层跳转到登录界面   个人中心、登录、论坛、个人、帖子
            goChangePage(bid,pid,uid) {
                let url = '';
                if (!pid && uid && bid ){
                    console.log(bid)
                    url = `bardetail.html?b=${bid}&u=${uid}`
                }
                if (pid && bid){
                    url = `postdetail.html?bid=${bid}&pid=${pid}`
                }
                if (uid && !bid && !pid ){
                    console.log(uid)
                    url = `userdetail.html?uid=${uid}`
                }
                window.open(url, '_blank');
            },
            goBack(){
                window.location.href = `index.html`;
                window.open(url, '_blank');
            },

            /**
             * 阿里云OSS上传
             */
            uploadHttp2({ file }) {
                // 创建FormData对象，并添加文件数据
                const formData = new FormData();
                formData.append("file", file);

                // 发送POST请求到后端
                axios.post('/tools/oss', formData, {
                    headers: {
                        "Content-Type": "multipart/form-data"
                    }
                }).then(response => {
                    console.log('上传成功', response);
                    console.log(response.data);
                    let parts = response.data.split('&&&');
                    if (this.url2 === '') {
                        this.url2 = parts[0];
                    }
                    this.objectName = parts[1];
                }).catch(error => {
                    console.error('上传失败', error);
                    this.$message.error('上传失败，请稍后重试。');
                });
            },
            /**
             * 图片限制
             */
            beforeAvatarUpload2(file) {
                const fileType = file.name.toLowerCase();
                const isImage = /\.(jpg|png)$/.test(fileType);

                let maxSizeMB;
                if (isImage) {
                    maxSizeMB = 1; // 图片最大1MB
                } else {
                    this.$message.error('上传文件只能是 JPG/PNG!');
                    return false;
                }
                const maxSizeBytes = maxSizeMB * 1024 * 1024;
                const isLtMaxSize = file.size / 1024 < maxSizeBytes;

                if (!isLtMaxSize) {
                    this.$message.error(`当前文件大小不能超过 ${maxSizeMB}MB!`);
                }

                return isImage && isLtMaxSize;

            },


            /**
             * 移除图片
             */
            handleRemove2 (file, fileList) {
                console.log('移除图片', file, fileList);
                axios.get("tools/del",{params:{objectName:this.objectName}}).then(x=>{
                    if(x.data == 'ok'){
                        // 删除最后一个分号及其后面的内容
                        let lastIndex = this.url2.lastIndexOf(';');
                        if (lastIndex !== -1) {
                            this.url2 = this.url2.substring(0, lastIndex);
                        } else {
                            // 如果没有分号，则直接清空 this.url2
                            this.url2 = '';
                        }
                        this.$message({
                            message: '删除成功',
                            type: 'warning'
                        });
                    }
                })
            },
            addBars(){
                axios.get("bars/addBars",{params:{uid:this.form.uid,bname:this.makebar.bname,tid:this.makebar.tid,bimage:this.url2}}).then(x=>{
                    this.$message({
                        showClose: true,
                        message: '提交成功',
                        type: 'success'
                    });
                })
            },
            xltz(uid,bid){
                this.$confirm('此操作将永久撤销该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    axios.get("bars/delOtherid",{params:{uid:uid,bid:bid}}).then(x=>{
                        this.$message({
                            showClose: true,
                            message: '撤销成功',
                            type: 'success'
                        });
                        this.OtherUser = this.OtherUser.filter(item => item.uid !=  uid);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            updateBarsApply(uid,bid,otherid){
                this.$confirm('确认通过申请, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    let o;
                    if (otherid == null || otherid == ''){
                        o = uid;
                    } else {
                        o = otherid + ',' + uid;
                    }
                    axios.get("bars/updateBarsApply",{params:{uid:uid,bid:bid,otherid:o}}).then(x=>{
                        this.$message({
                            showClose: true,
                            message: '通过',
                            type: 'success'
                        });
                        this.AllApply = this.AllApply.filter(item => item.uid !=  uid);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        },
    })
</script>
</body>
</html>